<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-08-17 10:42:48
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-08-23 20:21:26
 * @FilePath: \后端管理系统\app\src\views\Roles\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-08-17 10:37:59
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-08-19 18:27:21
 * @FilePath: \后端管理系统\app\src\views\Goods\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <MyBreadcrumb :breadList="$route.meta.breadList" />

    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-button type="primary" @click="addUser">添加角色</el-button>
        </el-col>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <!-- 商品管理 -->
              <el-row
                class="row_border"
                :gutter="20"
                type="flex"
                align="middle"
                v-for="item in scope.row.children"
                :key="item.id"
              >
                <!-- 第一级 -->
                <el-col :span="5">
                  <el-tag
                    type="success"
                    closable
                    @click="closeTag(scope.row, item.id)"
                    >{{ item.authName }}</el-tag
                  >
                  <i class="el-icon-caret-right"></i>
                </el-col>

                <!-- 第二三级 -->
                <el-col :span="19">
                  <el-row
                    :gutter="20"
                    class="row_border"
                    v-for="items in item.children"
                    :key="items.id"
                  >
                    <el-col :span="6">
                      <el-tag
                        @click="closeTag(scope.row, items.id)"
                        closable
                        type="info"
                      >
                        {{ items.authName }}
                      </el-tag>
                      <i class="el-icon-caret-right"></i>
                      <!-- <el-tag closable type="info" @click="closeTag(scope.row,items.id)">
                        {{ items.authName }}
                      </el-tag> -->
                      <!-- <i class="el-icon-caret-right"></i> -->
                    </el-col>

                    <el-col :span="18">
                      <el-tag
                        closable
                        type="warning"
                        v-for="child in items.children"
                        :key="child.id"
                        @click="closeTag(scope.row, child.id)"
                      >
                        {{ child.authName }}
                      </el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="角色名称" prop="roleName"> </el-table-column>
          <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
          <el-table-column label="操作" prop="desc">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                icon="el-icon-edit"
                @click="editRoles(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                icon="el-icon-delete"
                @click="delRoles(scope.row)"
                >删除</el-button
              >
              <el-button
                type="warning"
                size="small"
                icon="el-icon-edit"
                @click="treeRight(scope.row)"
                >编辑权限</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>

    <!-- 弹框 -->
    <el-dialog
      :title="type ? '添加' : '编辑'"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <p>
        角色名称:
        <el-input v-model="ruleForm.roleName" style="width: 300px"></el-input>
      </p>
      <p>
        角色描述:
        <el-input v-model="ruleForm.roleDesc" style="width: 300px"></el-input>
      </p>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ok()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="dialogFormVisible"
      width="30%"
      :before-close="handleClose"
      class="treeDialog"
    >
      <el-tree
        :data="treeData"
        show-checkbox
        default-expand-all
        node-key="id"
        :default-checked-keys="defaultTree"
        highlight-current
        ref="tree"
        :props="defaultProps"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import MyBreadcrumb from "../../components/MyBreadcrumb.vue";
import {
  httpRoles,
  httpDelRolesRight,
  httpDelRoles,
  httpEditRoles,
  httpAddRoles,
  httpRightsList,
  httpRolesRights,
} from "../../api/roles";

export default {
  components: {
    MyBreadcrumb,
  },

  data() {
    return {
      ruleForm: {
        roleName: "",
        roleDesc: "",
      },
      tableData: [],
      dialogVisible: false,
      type: false,
      id: "", //编辑 删除id
      dialogFormVisible: false, //权限弹框
      treeData: [], //树形列表数据
      defaultTree: [], //
      roleId: "", //角色id
      defaultProps: {
        label: "authName",
      },
    };
  },
  created() {
    this.initRole();
  },
  methods: {
    async initRole() {
      const res = await httpRoles("/roles");
      console.log(res);
      this.tableData = res.data.data;
    },
    // 添加角色
    addUser() {
      this.dialogVisible = true;
      this.type = true;
      // 清空输入框
      this.ruleForm.roleDesc = "";
      this.ruleForm.roleName = "";
    },
    // 关闭弹框
    handleClose() {
      this.dialogVisible = false;
    },
    //编辑弹框
    editRoles(row) {
      this.dialogVisible = true;
      this.id = row.id;
      this.type = false;
      // 数据回显
      this.ruleForm.roleDesc = row.roleDesc;
      this.ruleForm.roleName = row.roleName;
    },
    // 删除角色
    async delRoles(row) {
      const res = await httpDelRoles(`/roles/${row.id}`);
      console.log(res);
      if (res.data.meta.status === 200) {
        this.$message({
          message: res.data.meta.msg,
          type: "success",
        });
        this.initRole();
      } else {
        this.$message.error(res.data.meta.msg);
      }
    },
    // 确定弹框
    async ok() {
      this.dialogVisible = false;
      if (!this.type) {
        // 编辑
        const res = await httpEditRoles(`/roles/${this.id}`, this.ruleForm);
        if (res.data.meta.status === 200) {
          this.$message({
            message: res.data.meta.msg,
            type: "success",
          });
          this.initRole();
        } else {
          this.$message.error(res.data.meta.msg);
        }
      } else {
        // 添加
        const res = await httpAddRoles("/roles", this.ruleForm);
        console.log(res);
        this.initRole();
      }
    },

    // 删除权限
    async closeTag(col, rightId) {
      const res = await httpDelRolesRight(`/roles/${col.id}/rights/${rightId}`);
      console.log(col);
      if (res.data.meta.status === 200) {
        this.$message({
          message: res.data.meta.msg,
          type: "success",
        });
        col.children = res.data.data;
      } else {
        this.$message.error(res.data.meta.msg);
      }
    },
    // 获取树形数据
    async treeDate() {
      const res = await httpRightsList("rights/tree");
      this.treeData = res.data.data;
      console.log(res);
    },
    // 权限分配
    treeRight(row) {
      this.dialogFormVisible = true;
      this.treeDate();
      this.getTreeId(row, this.defaultTree);
      this.roleId = row.id;
    },
    // 格式化数据  递归函数
    getTreeId(row, defaultTree) {
      row.children.forEach((item) => {
        defaultTree.push(item.id);
        if (item.children) {
          this.getTreeId(item, defaultTree);
        }
      });
    },
    // 保存
    async save() {
      let keys = [
        ...this.$refs.tree.getCheckedKeys(), //选中的节点
        ...this.$refs.tree.getHalfCheckedKeys(), //半选中的节点
      ];
      keys = keys.join(","); //以逗号分隔成字符串
      const res = await httpRolesRights(`roles/${this.roleId}/rights`, {
        rids: keys,
      });
      console.log(res);
      this.dialogFormVisible = false;

      if (
        res.status === 200 &&
        res.data.meta.status >= 200 &&
        res.data.meta.status <= 204
      ) {
        this.$message({
          message: res.data.meta.msg,
          type: "success",
        });
        this.initRole();
      } else {
        this.$message.error(res.data.meta.msg);
      }
    },
  },
};
</script>

<style>
.box-card {
  margin-top: 20px;
}
.el-tag {
  margin: 5px;
}
.row_border {
  border-bottom: 1px solid #ccc;
}
.el-dialog {
  overflow-y: auto;
  border: 0px solid black;
  height: 500px;
  line-height: 1em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
</style>